<template>
  <view class="item" @click="triggerClickEvent">
    <view>
      <slot name="left-icon">
        <uni-icons
          v-if="props.leftIconCustom"
          custom-prefix="iconfont"
          :type="toAny(props.leftIcon)"
          size="25"
          color="#747474"
        ></uni-icons>
        <uni-icons :type="toAny(props.leftIcon)" v-else size="25" color="#747474"></uni-icons>
      </slot>
    </view>
    <view class="item-content">
      <span class="left-content" :style="{ fontWeight: props.isContentLeftFontWeight ? '700' : 'none' }">
        <slot name="left-text">
          {{ props.contentLeft }}
        </slot>
      </span>
      <span class="right-content" :style="{ fontWeight: props.isContentLeftFontWeight ? '700' : 'none' }">
        {{ props.contentRight }}
      </span>
    </view>
    <view v-if="props.isEnableRightIcon">
      <slot name="right-text">
        <uni-icons type="right" :size="16"></uni-icons>
      </slot>
    </view>
    <view>
      <slot name="right"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps({
  leftIcon: {
    type: String,
    default: ''
  },
  leftIconCustom: {
    type: Boolean,
    default: false
  },
  contentLeft: {
    type: String,
    default: ''
  },
  isContentLeftFontWeight: {
    type: Boolean,
    default: false
  },
  contentRight: {
    type: String,
    default: ''
  },
  isContentRightFontWeight: {
    type: Boolean,
    default: true
  },
  isEnableRightIcon: {
    type: Boolean,
    default: true
  }
})
const emits = defineEmits<{
  (e: 'click'): void
}>()
function toAny(icon: string): any {
  return icon
}
// 触发点击事件
function triggerClickEvent() {
  emits('click')
}
</script>

<style scoped lang="scss">
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 25rpx;
  width: 100%;
  border-bottom: 1px solid #ededed;

  .item-content {
    display: flex;
    justify-content: space-between;
    margin: 0 10rpx;
    width: 0;
    height: 40rpx;
    font-size: 27rpx;
    flex-grow: 1;
    box-sizing: border-box;
    line-height: 40rpx;

    .left-content {
      display: inline-block;
      margin-right: 20rpx;
    }

    .right-content {
      display: inline-block;
      overflow: hidden;
      width: 0;
      text-align: right;
      text-overflow: ellipsis;
      flex-grow: 1;
    }
  }
}

.item:last-child {
  border: none;
}
</style>
